/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, TextArea, InputLine, CCell, Table, TableRow, TableBody, Cell, LineColumn, Input,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

const items电性能=[
    ['阴保运','阴极保护系统设备运行情况（含管道阴极保护运行率和保护率）'],
    ['电绝缘','电绝缘装置的绝缘性能（绝缘接头、绝缘法兰等）'],
    ['跨接缆','跨接电缆或其它电连接设置的电连续性'],
];

export const itemA电性能: string[] = ['电仪器名','电仪器编', '电性备注', ];
items电性能.forEach(([name, desc], w) => {
    itemA电性能.push(name);
});

export const ElectricalPerf =
React.forwardRef((
    {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
) => {
    const {inp, setInp} = useItemInputControl({ref});
    const [getInpFilter] = useMeasureInpFilter(null, itemA电性能,);
    return (
    <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                         alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        <Text variant="h6">检测依据：</Text>1、SY/T0086-2020 《阴极保护管道的电绝缘标准》<br/>
            2、其他相关标准
        <LineColumn>
            <InputLine  label='仪器名称' >
                <Input  value={inp?.电仪器名 ||''}
                        onChange={e => setInp({ ...inp, 电仪器名: e.currentTarget.value}) } />
            </InputLine>
            <InputLine  label='仪器编号' >
                <Input  value={inp?.电仪器编 ||''}
                        onChange={e => setInp({ ...inp, 电仪器编: e.currentTarget.value}) } />
            </InputLine>
        </LineColumn>
        { items电性能.map(([name,desc] : any, i:number)=>
             <div key={i}>
                 <Text variant="h5">{desc}</Text>
                 <TextArea  value={inp?.[name] ||''} rows={8}
                            onChange={e => setInp({ ...inp, [name]: e.currentTarget.value||undefined}) } />
            </div>
        )}
        <Text variant="h5">备注：</Text>
        <TextArea  value={inp?.电性备注 ||''} rows={6}
                   onChange={e => setInp({ ...inp, 电性备注: e.currentTarget.value||undefined}) } />
        {children}
    </InspectRecordLayout>
    );
});

export const ElectricalPerfVw= ({orc, rep,op} :{orc:any, rep:any,op?:boolean}
) => {
    return <>
        <div css={{"@media print": {paddingBottom: '6rem', pageBreakInside: 'avoid'}} }>
            <Text id='ElectricalPerf' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>电性能测试{op?'记录':'报告'}</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>{op?'记录':'报告'}编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["15%","48%","10%", "%"] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-6rem'}}} tight  miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'ElectricalPerf'}>
                    <TableRow>
                        <CCell>检测依据</CCell><Cell colSpan={3}>1、SY/T0086-2020 《阴极保护管道的电绝缘标准》<br/>
                            2、其他相关标准</Cell>
                    </TableRow>
                    <TableRow>
                        <CCell>仪器名称</CCell><CCell>{orc?.电仪器名 ?? '／'}</CCell>
                        <CCell>仪器编号</CCell><CCell>{orc?.电仪器编 ?? '／'}</CCell>
                    </TableRow>
                    {items电性能.map(([name, desc]: any, i: number) =>
                        <TableRow key={i}>
                            <CCell>{desc}</CCell>
                            <Cell colSpan={3} css={{whiteSpace: 'pre-wrap'}}>{orc?.[name] ?? '／'}</Cell>
                        </TableRow>
                    )}
                    <TableRow>
                        <Cell colSpan={4}><div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                            备注：<br/>
                            {orc.电性备注 ?? '／'}</div></Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck cap={'检查'} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </>;
};
